{% load filters %}

{% if form_to_comment.instance.comment %}
<table class="comment_table">
  <thead>
    <tr>
        {% if perms.ticket.can_view_internal_comments %}<th style="width:48%">Interne</th>{% endif %}
        <th style="width:48%">Diffusé au client</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        {% if perms.ticket.can_view_internal_comments %}
        <td>
            {% for comment in form_to_comment.instance.comment %}{% if comment.internal %}
                <div class="comment">
                    <h3><b>{{ comment.user.first_name }} {{ comment.user.last_name }}</b> ({{ comment.user_name }})&nbsp;<i>Le {{ comment.submit_date|date:'d/m/Y à H\hi' }}</i></h3>
                    <pre class="{% cycle 'row1' 'row2' %}">{{ comment.comment|linebreaks|wordwrap:80 }}</pre>
                </div>
            {% endif %}{% endfor %}
        </td>
        {% endif %}

        <td>
            {% for comment in form_to_comment.instance.comment %}{% if not comment.internal %}
                <div class="comment">
                    <h3><b>{{ comment.user.first_name }} {{ comment.user.last_name }}</b> ({{ comment.user_name }})&nbsp;<i>Le {{ comment.submit_date|date:'d/m/Y à H\hi' }}</i></h3>
                    <pre class="{% cycle 'row1' 'row2' %}">{{ comment.comment|linebreaks|wordwrap:80 }}</pre>
                </div>
            {% endif %}{% endfor %}
        </td>

      </tr>
    </tbody>
</table>
{% else %}
<p>Aucune réponse.</p>
{% endif %}

{% block comment_form %}
    <div class="no_print">
      <p>Nouvelle réponse:<br/> {{ form_to_comment.comment }}</p>
        {% if perms.ticket.can_view_internal_comments %}
        <div dojoType="dijit.Tooltip" connectId="{{ form_to_comment.get_exact_id|interpret:"comment" }}" position="after" id="{{ form_to_comment.get_exact_id|interpret:"internal"}}-tooltip">
            <div style="display: none;">
                <img src="{{ MEDIA_URL }}images/oxygen/comment_public.png" alt="commentaire_public" />
                <p>Attention, la réponse sera transmise au client final</p>
            </div>
            <div>
                <img src="{{ MEDIA_URL }}images/oxygen/comment_internal.png" alt="commentaire_interne" />
                <p>La réponse sera conservée en interne</p>
            </div>
        </div>
        <p>{{ form_to_comment.internal }}<span id="checkbox_internal_comment"> Commentaire <b>Interne</b> (Si cette case est cochée, la réponse ne sera pas transmise au client final)</span></p>
        {% endif %}
    </div>
{% endblock comment_form %}

<script type="text/javascript">
<!-- Connexion du checkbox_internal_comment ->
dojo.addOnLoad( function() 
{
    dojo.connect(dojo.byId("checkbox_internal_comment"), "onclick", function() {
        /* check or uncheck the form cb */
        var w = dijit.byId("id_internal");
        w.set("checked", !w.checked);
    });
});
</script>